<template>
  <div class="img-list">
    <div class="row">
      <div class="span-3 smal-12" v-for="(article, index) in articles" :key="index" v-if="index < limit">
        <div class="classBox fix">
          <a class="imgZoom" href="javascript:void(0);" @click="loginCheck(article.id);">
            <span class="img rect-75"><img :src="article.photo" :alt="article.title" class="_full"></span>
            <div class="view"><i class="el-icon-view"></i>{{article.views}}</div>
            <div class="title">{{article.title}}</div>
            <div class="content">{{article.content}}</div>
          </a>
        </div>
      </div>
    </div>
    <Sooclogin ref="sooclogin"></Sooclogin>
  </div>
</template>
<script>
export default {
  props: {
    articles: {
      type: Array,
      default: []
    },
    limit:0
  },
  methods: {
    loginCheck(id){
      if(this.$store.state.token){
        this.$router.push('/detail/'+id);
      }else{
        this.$refs.sooclogin.boxshow();
        return false;
      }
    }
  }
}
</script>
<style lang="postcss">
.img-list {
  padding-top:20px; 
  & .imgZoom { 
    display:block;
  }
  & img {
    max-width:100%;
  }
  & .title,
  & .view {
    height:30px; 
    line-height:30px; 
  }
  & .title {
    font-size:15px; 
    margin-bottom:5px; 
    margin-right:80px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
  }
  & .view {
    float: right;
    & i {
      margin-right:5px;
    }
  }
  & .content {
     font-size:13px;
     line-height:1.5em;
     height:3em;
     color: #999;
     overflow: hidden;
  }
  & .classBox {
    margin-bottom:20px;
  }
}
</style>
